<!--
 * @Author: ZhongShiGui 13751817115@163.com
 * @Date: 2023-05-24 09:58:21
 * @LastEditors: ZhongShiGui 13751817115@163.com
 * @LastEditTime: 2023-08-24 15:37:31
 * @FilePath: /cyberwing-web-starter/src/views/org/app-menu/component/lowcode-select-dialog.vue
 * @Description: 关联界面对话框
 * 
 * Copyright (c) 2023 by ZhongShiGui, All Rights Reserved. 
 * 2023-05-24 09:58:21
-->

<template>
  <div class="jxtech-dialog-form">
    <el-dialog
      v-model="visibleModelValue"
      title="选择关联在线表单"
      width="80%"
      destroy-on-close
      :before-close="InterphaseSelectState.onCancelHandler"
    >
      <template #default>
        <jxtech-basic-card>
          <template #operationSpace>
            <jxtech-search-input
              tips="功能编码"
              v-model="InterphaseSelectState.queryParam.functionTbName"
              @search="InterphaseSelectState.handleSearch"
            >
            </jxtech-search-input>
          </template>

          <JxtechPageTableExt
            ref="InterphasePageTableRef"
            row-key="functionId"
            table-height="calc(100vh - 15vh - 280px)"
            :table-column="InterphaseSelectState.tableColumn"
            :load-data="InterphaseSelectState.loadData"
            :exp-data="InterphaseSelectState.expData"
            @selection-change="InterphaseSelectState.tableSelectionChange"
          >
            <template #layoutSlot="{ row }">
              <span v-if="row.layout == 'tile'">平铺</span>
              <span v-else>页签</span>
            </template>
          </JxtechPageTableExt>
        </jxtech-basic-card>
      </template>
      <template #footer>
        <jxtech-cancel-button @click="InterphaseSelectState.onCancelHandler">关闭</jxtech-cancel-button>
        <jxtech-ok-button @click="InterphaseSelectState.onFinishHandler"></jxtech-ok-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="interphase-select-dialog">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { ExportFunctionServiceApi } from "@/api/modules/low-code/bean/config";
import { messageInfoTip, messageSuccessTip, messageErrorTip, messageWarningTip } from "@/utils/message-config";
import { JxtechPageTableColumn } from "@whjxtech/jxtech-component";
const InterphasePageTableRef = ref();
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "ok-many", dataList: any[], pkList: string[]): void;
}>();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  (newValue: boolean, oldValue: boolean) => {
    visibleModelValue.value = newValue;
  }
);
watch(
  () => visibleModelValue.value,
  (newValue: boolean, oldValue: boolean) => {
    emit("update:visible", newValue);
    if (newValue) {
      nextTick(() => {
        InterphasePageTableRef.value.loadTable();
      });
    }
  }
);

const InterphaseSelectState = reactive({
  queryParam: { functionTbName: null },
  /**
   * 表格选中的数据主键
   */
  selectionPkList: [] as string[],
  /**
   * 表格选中的数据
   */
  selectionListData: [] as any[],
  handleSearch: () => {
    InterphasePageTableRef.value.loadTable();
  },
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "50", type: "index" },
    { prop: "functionName", label: "表单名称" },
    { prop: "functionTbName", label: "表单编码" }
  ] as JxtechPageTableColumn[],
  loadData: (params: any) => {
    return ExportFunctionServiceApi.queryPage({}, { ...params, ...InterphaseSelectState.queryParam });
  },
  expData: (params: any) => {
    return ExportFunctionServiceApi.exportData({ refCols: "default" }, { ...params, ...InterphaseSelectState.queryParam });
  },
  tableSelectionChange: (dataList: any[], pkList: string[]) => {
    InterphaseSelectState.selectionListData = dataList;
    InterphaseSelectState.selectionPkList = pkList;
  },
  onCancelHandler: () => {
    visibleModelValue.value = false;
    InterphaseSelectState.selectionListData = [];
    InterphaseSelectState.selectionPkList = [];
  },
  onFinishHandler: () => {
    if (
      InterphaseSelectState.selectionListData.length > 0 &&
      InterphaseSelectState.selectionListData.length < 2 &&
      InterphaseSelectState.selectionPkList.length > 0 &&
      InterphaseSelectState.selectionPkList.length < 2
    ) {
      emit("ok-many", InterphaseSelectState.selectionListData, InterphaseSelectState.selectionPkList);
      visibleModelValue.value = false;
      InterphaseSelectState.selectionListData = [];
      InterphaseSelectState.selectionPkList = [];
    } else {
      messageWarningTip("请选中一项");
    }
  }
});
</script>

<style lang="scss" scoped></style>
